<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout" style="height: 140px;">
      <Row :gutter="16">
        <Col span="8">
          <div>工序订单名称：{{ titleDetail.planNo }}</div>
        </Col>
        <Col span="8">
          <div>产品名称：{{ titleDetail.productName }}</div>
        </Col>
        <Col span="8">
          <div>总数：{{ titleDetail.orderCount }}</div>
        </Col>
      </Row>
      <Row :gutter="16">
        <Col span="6">
          <div>开始时间：{{
              titleDetail.actualBeginTime
            }}
          </div>
        </Col>
        <Col span="6">
          <div>结束时间：{{ titleDetail.actualEndTime }}</div>
        </Col>
        <Col span="6">
          <div>待派发：</div>
        </Col>
        <Col span="6">
          <div>已派发：</div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="handleAdd" type="primary">
          批量派工
        </Button>
      </div>
      <div :style="{ height: tableHeight + 'px' }">
        <Table :columns="columns" ref="selection" border :data="orderList" :height="tableHeight">
          <template slot-scope="{ row }" slot="action">
            <Button size="small" icon="md-archive" @click="handleDeleteRow(row, true)"
                    style="margin-right: 5px;" :disabled="row.status > 2">下发
            </Button>
            <Button size="small" type="error" icon="ios-beaker" @click="handleDeleteRow(row)"
                    :disabled="row.status > 2">删除
            </Button>
          </template>
        </Table>
      </div>
      <!-- <div class="pageWrap mt16">
          <pageLeftTitle :total="total" />
          <Page :total="total" :page-size="params.pageSize" :current="params.current" @on-change="changePageNum"
              @on-page-size-change="changePageSize" show-sizer />
      </div> -->
    </div>
    <Modal :mask-closable="false" v-model="deleteShow" class="modal-title-layout">

      <div v-if="!currentItem.open">
        <div class="icon red">
          <i class="iconfont zy-common-shanchu"></i>
        </div>
        <p class="title">
          <span>{{ $t('common.sureDelete') }}</span>
        </p>
      </div>
      <div v-if="currentItem.open">
        <div class="icon blue">
          <Icon type="md-arrow-dropdown-circle"/>
        </div>

        <p class="title">
          <span>是否要下发</span>
        </p>
      </div>
      <div slot="footer">

        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>


    <CreateOrUpdateModal :visible="createStatus" :form="form" title="批量派工" @update:visible="createStatus = $event"
                         :handleAddSubmit="handleAddSubmit" :materialList="materialList"
                         :putMaterialData="putMaterialData"
                         :equipmentData="equipmentData"
                         :titleDetail="titleDetail"
                         />

  </div>
</template>

<script>
import ImportExcelModal from '@/components/importExcel.vue';
import fileDownload from "js-file-download";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from '@/mixins/toggleTableOperation';
import CreateOrUpdateModal from './modal_open.vue';
import {
  procedureResourceApi,
  equipmentAll,
  putMaterialRedord,
  basedataWorkRecord,
  procedureOrder,
  basedataWorkOrderUpdate,
  delBasedataWorkOrder
} from '@/api/scheduling/dispatchManagement'

export default {
  name: "list.vue",
  components: {ImportExcelModal, search, CreateOrUpdateModal},
  mixins: [toggleTableOperation],
  data() {
    return {
      params: {
        // pageSize: 20,
        // current: 1
      },
      dicData: [
        {label: "新建", value: 0},
        {label: "待排产", value: 1},
        {label: "已排产", value: 2},
        {label: "下发", value: 3},
        {label: "开工", value: 4},
        {label: "中断", value: 5},
        {label: "暂停", value: 6},
        {label: "完成", value: 7},
      ],
      columns: [
        {
          title: '工序订单号',
          key: 'workNo',
          align: 'center',
        },
        {
          title: '产品名称',
          key: 'productName',
          align: 'center',
        }, {
          title: '订单数量',
          key: 'orderCount',
          align: 'center',

        }, {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            const name = this.dicData.find(i => i.value === params.row.status)
            return h('div', name.label);
          }
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 180,
          align: "center"
        }
      ],
      importExcelState: false,
      orderList: [],
      total: 0,
      deleteShow: false,
      currentItem: {},
      createStatus: false,
      form: {},
      nameList: [],
      searchParams: {},
      materialList: [],
      titleDetail: {},
      putMaterialData: [],
      equipmentData: []
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 400;
    }
  },

  mounted() {
    this.getList(),
        this.relevance(),
        this.titleDetail = this.$route.query
  },
  methods: {
    relevance() {
      equipmentAll().then(res => {
        if (res.code === 200) {
          this.equipmentData = res.data
        }
      })
    },
    getSearch(arg) {
      this.searchParams = arg[0] || {};
      this.getList();
    },

    async getList() {
      procedureOrder({
        ...this.params,

        id: this.$route.query.id,
      }).then(res => {
        if (res.code === 200) {
          this.orderList = res.data,
              this.total = res.data.total
        }
      })
    },
    reset() {
      this.params = {pageSize: 20, current: 1};
      this.getList();
    },
    changeNum() {
      this.params.current = 1;
      this.params.pageSize = 20;
      this.getList();
    },
    handleAdd() {
      procedureResourceApi({procedureId: this.$route.query.procedureId}).then(res => {
        if (res.code === 200) {
          const {configJson} = res.data.records[0]
          const putMaterial = JSON.parse(configJson).equipment
          this.putMaterialData = putMaterial.map(i=>{
            return {
              ...i,
              needNumber: 0,
              toolId:''
            }
          })
        }
      })

      this.form = {};
      this.createStatus = true;
    },

    handleImportData() {
      this.importExcelState = true;
    },
    handleAddSubmit() {
      console.log(this.putMaterialData,'this.putMaterialData')
      const promises = this.putMaterialData.map(item => {
        return {
            equipmentId: item.equipmentId,
            orderCount: item.needNumber || 0,
            procedureId: this.$route.query.id,
            equipmentToolDTO:{
              equipmentId: item.equipmentId,
              toolId: item.toolId
            }
          }
      })
      
      putMaterialRedord(promises).then(res => {
        console.log(res, 'res')
        if (res.code === 200) {
          this.$Message.success('保存成功');
          this.getList()
          this.createStatus = false;
        } else {
          this.$Message.error(res.methods);
        }
      })
    },
    handleEditRow(row) {
      this.form = {...row};
      this.createStatus = true;
    },
    handleDeleteRow(row, flag) {
      this.currentItem = {...row, open: flag}
      this.deleteShow = true;
    },
    handleDeleteSure() {
      if(this.currentItem.open){
        basedataWorkOrderUpdate({id: this.currentItem.id, status: 3}).then(res => {
        if (res.code !== 200) {
          this.$Message.warning(res.message);
          return false
        }
        this.$Message.success('下发成功');
        this.deleteShow = false;
        this.getList();


      })
      }
   
      this.getList()
    },
    changePageNum(val) {
      this.params.current = val;
      this.getList();
    },
    changePageSize(val) {
      this.params.pageSize = val;
      this.getList();
    }
  }
}
</script>

<style scoped>

</style>
